const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin'); // html 插件
const dev = {
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, 'build').replace('config\\', ''),
    compress: true,
    port: 3000,
    open: true
  },
  entry: {
    homePage: './src/index.js',
    other: './src/order.js',
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, 'build').replace('config\\', ''),
    // 所有输出资源的公共路径  ===>路径前面加个~
    publicPath: '/',
    chunkFilename: 'js/[name]_chunk.js',
    // library: '[name]', // 整个库向外暴露的变量名
    // libraryTarget: 'window' // 变量名添加到哪个上 browser
    // libraryTarget: 'global' // 变量名添加到哪个上 node
    // libraryTarget: 'commonjs'
  },
  module: {
    rules: [
      /**
       * test   使用正则表达式匹配正确的文件
       * use数组中的loader执行顺序：从左到右，从上到下，一次执行
       * style-loader  创建style标签，将js中的样式资料插入html，添加到head中生效
       * css-loader  将css文件变成commonjs模块加载到js中，里面内容是样式字符串
       * less-loader 将less文件编译成css文件
       */
      {
        test: /\.less$/, use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.css$/, use: [
          'style-loader',
          'css-loader'
        ]
      },
      /**
       * 默认处理不了HTML中的img图片
       * limit: 小于多少8kb的图片压缩成base64处理，减少请求数量减轻服务器压力，
       * esModule: 因为url-loader默认使用es6模块解析，而html-loader引入图片是commonjs解析可能会出现[object Module]
       *            解决方案关闭url-loader的es6模块化，使用commonjs解析
       *  name 给图片进行重命名【hash:10】取图片的hash的前10位 【ext】取文件原来的扩展名
       *  outputPath 文件输出的路径
       */
      {
        test: /\.(jpg|jpeg|png|gif)$/, loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          esModule: false,// 关闭es6模块化
          outputPath: 'images'
        }
      },
      // 处理html中img资源
      {test: /\.html$/, loader: 'html-loader'},
      /**
       * 处理其他资源
       */
      {
        exclude: /\.(html|js|css|less|jpg|png|gif)/, loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'files'
        }
      }
    ]
  },
  plugins: [
    /**
     * html-webpack-plugin 默认会创建一个HTML，自动打包输出的所有资源（js/css）,需要有结构的HTML文件
     */
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
};
module.exports = dev;
